<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为文字设置大小</title>
<style>
body{
font-family:微软雅黑}

</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<label>选择文字大小：</label>
  	<select v-model="size">
		<option value="20px">20px</option>
		<option value="30px">30px</option>
		<option value="40px">40px</option>
		<option value="50px">50px</option>
		<option value="60px">60px</option>
	</select>
	<p v-font-size="size">天生我材必有用</p>
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data: {
        size: '20px'
    },
    directives: {
        fontSize: function (el,binding) {
			el.style.fontSize = binding.value;//设置字体大小
        }
    }
})
</script>


</body>

</html>



